<template>
	<view>
		<view class="signature-dialog" @click.stop @touchmove.prevent.stop>
			<view class="content-view">
				<view class="title-text">请输入支付密码</view>

				<view class="input-view">
					<view class="input-label">密码</view>
					<input type="text" v-model="inputPassword" password placeholder="请输入支付密码" class="input-css"
						placeholder-class="plac-css" />
				</view>
				<view class="button-view">
					<view class="button-item" @click="onClose">取消</view>
					<view class="button-item button-active" @click="onConfirm">确定</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "SignatureDialog",
		data() {
			return {
				inputPassword: '',
			};
		},
		methods: {
			onConfirm() {
				if (!this.inputPassword) return uni.$util.showToast('请输入支付密码')
				this.$emit('confirm', this.inputPassword)
			},
			/**
			 * 清空Canvas
			 */
			onClose() {
				this.$emit('close')
			}
		}
	}
</script>

<style scoped lang="scss">
	.signature-dialog {
		width: 100%;
		height: 100vh;
		background: rgba(6, 0, 0, 0.9);
		position: fixed;
		top: 0;
		left: 0;
		z-index: 21;
		@extend .column;
		justify-content: flex-start;
		padding-top: 158upx;

		.content-view {
			width: 649rpx;
			padding: 29upx;
			background: #FFFFFF;
			border-radius: 14rpx;
			padding-top: 40upx;

			.title-text {
				text-align: center;
				font-size: 29rpx;
				font-weight: 500;
				color: #2C1101;
			}

			.input-view {
				width: 100%;
				@extend .row-start;
				padding: 29upx;
				background: #F7F2EE;
				margin-top: 43upx;

				.input-label {
					font-size: 29rpx;
					font-weight: 500;
					color: #2C1101;
				}

				.input-css {
					flex: 1;
					margin-left: 40upx;
					font-size: 29rpx;
					font-weight: 500;
				}

				.plac-css {
					font-size: 29rpx;
					font-weight: 500;
					color: #B8ACA3;
				}
			}



			.button-view {
				width: 100%;
				margin-top: 43upx;
				@extend .row-between;

				.button-item {
					width: calc(100% / 2 - 9upx);
					height: 91rpx;
					border-radius: 45rpx;
					border: 1rpx solid #FF2615;
					@extend .column;
					font-size: 29rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 500;
					color: #FF2615;
				}

				.button-active {
					background: linear-gradient(180deg, #FF7065 0%, #FF2615 100%);
					color: white;
				}
			}
		}
	}
</style>